<template>
	<view>
		<view class="nav">
			<view :class="item.itemId==pageParam.explain_type?'item check':'item'" v-for="(item,index) in nav" :key="index" @click="selNav(item.itemId)">
				{{item.itemName}}{{item.itemNum > 0 ? ' ('+item.itemNum+')': ''}}
			</view>
		</view>	
		<view class="comment" v-if="pageResult.list.length > 0">
			<view class="item" v-for="(item, index) in pageResult.list" :key="index">
				<view class="left">
					<image :src="item.head_portrait" mode="aspectFill"></image>
				</view>
				<view class="right">
					<view class="name">
						<view class="txt">
							<text>{{item.member_name}}</text>
							<text>{{item.create_time}}</text>
						</view>
						<view class="txt1">{{item.explain}}</view>
					</view>
					<view class="txt2">{{item.content}}</view>
					<view class="comment_img" v-if="item.has_cover">
						<image :src="item2.thumbUrl" @tap="previewImage" :data-src="item2.imgUrl" :data-id="item.id" v-for="(item2,index2) in item.covers" mode="aspectFill"></image>
					</view>
					<view class="txt3" v-if="item.is_explain > 0">
						<text>商家回复：</text>
						<text>{{item.explain_first}}</text>
					</view>
				</view>
			</view>
			
		</view>
		<view class="nocomment" v-if="pageResult.list.length == 0">
			暂无评价～
		</view>
	</view>
	

</template>

<script>
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	export default {
		data() {
			return {
				dataList:[{},{}],
				nav: [
					{"itemId":0, "itemName":"全部", "itemNum" : 0},
					{"itemId":3, "itemName":"好评", "itemNum" : 0},
					{"itemId":2, "itemName":"中评", "itemNum" : 0},
					{"itemId":1, "itemName":"差评", "itemNum" : 0},
				],
				imgList: [],
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					merchantId: 0,
					explain_type: 0,// 评论内容
					page: 0,
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				}
			}
		},
		methods: {
			getStat() {
				var self = this;
				serve
					.request({
						url: '/marketing/evaluate/stat',
						data: {
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							merchantId: self.pageParam.merchantId,
						}
					})
					.then(res => {
						console.log(res.data); 
						this.$set(this.nav[0], 'itemNum', res.data.total_num);
						this.$set(this.nav[1], 'itemNum', res.data.good_num);
						this.$set(this.nav[2], 'itemNum', res.data.ordinary_num);
						this.$set(this.nav[3], 'itemNum', res.data.negative_num);
						console.info(this.nav);
					});
			},
			getList(){
				var self = this;
				self.pageParam.page++
				serve
					.request({
						url: '/marketing/evaluate/index',
						data: self.pageParam
					})
					.then(res => {
						// console.log(res.data); 
						if (res.data && res.data.length > 0) {
							self.pageResult.list=self.pageResult.list.concat(res.data);
							self.pageResult.list.forEach((item, index) => {
								if(item.covers.length > 0) {
									self.imgList[item.id] = [];
									item.covers.forEach((imgItem, imgKey) => {
										self.imgList[item.id][imgKey] = imgItem.imgUrl;
									});
								}
							});
						}
						console.info(self.imgList);
						self.pageResult.isEmpty = self.pageResult.list.length == 0;
						self.pageResult.isEnd = res.data.length == 0; 
						// console.log(self.pageResult.list);
					});
			},
			selNav(index) {
				// let item = this.nav[index];
				this.pageParam.explain_type = index;
				this.pageParam.page=0;
				this.pageResult.list=[];
				this.getList();
			},
			previewImage: function(e) {
				var current = e.target.dataset.src;
				var imgKey = e.target.dataset.id;
				uni.previewImage({
					current: current,
					urls: this.imgList[imgKey]
				})
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			this.pageParam.merchantId = options.id || 0;
			if(this.pageParam.merchantId == 0) {
				uni.showToast({
					title: "错误的访问方式",
					icon: 'none',
					success() {
						setTimeout(function () {
							this.jump('store_list')
						}, 2000) 
					}
				});
			}
			this.getStat();
			this.getList();
		},
		onPullDownRefresh() {
			this.pageParam.page=0;
			this.pageResult.list=[];
			this.getStat();
			this.getList();
		},
		onReachBottom() {
			if(this.pageResult.isEnd ||this.pageResult.isEmpty){
				return
			}
			this.getList()
		}
	}
</script>
<style lang="scss">
	.nav {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0upx 24upx;
		display: flex;
		justify-content: space-between;
		height: 110upx;
		border-bottom: 1upx solid #EBEBEB;
		position: fixed;
		z-index: 10;
		width: 100%;
		background: #FFFFFF;
		
		.item {
			width: 140upx;
			height: 60upx;
			line-height: 60upx;
			text-align: center;
			background: rgba(245, 245, 245, 1);
			border-radius: 30upx;
			font-size: 28upx;
			color: #999999;
		}
		.check{
			background:#FFF9E8;
			border:1px solid #FFBC00;
			color: #FFBC00;
		}
	}
	.comment{
		padding-top: 110upx;
		.item {
			display: flex;
			box-sizing: border-box;
			padding: 50upx 30upx;
			border-bottom: 1upx #EBECF0 solid;
		
			.left {
				image {
					width: 60upx;
					height: 60upx;
					border-radius: 50%;
				}
			}
		
			.right {
				margin-left: 13upx;
				width: 617upx;
		
				.name {
					display: flex;
					align-items: center;
					justify-content: space-between;
		
					.txt {
						display: flex;
						align-items: center;
		
						text:nth-child(1) {
							font-size: 28upx;
							font-weight: bold;
							color: #333333;
						}
		
						text:nth-child(2) {
							color: #999999;
							font-size: 20upx;
							margin-left: 25upx;
						}
					}
		
					.txt1 {
						color: #EB5938;
						font-size: 28upx;
					}
				}
		
				.txt2 {
					font-size: 28upx;
					color: #666666;
					margin-top: 30upx;
				}
		
				.comment_img {
					display: flex;
		
					image:first-child {
						margin-left: 0;
					}
		
					image {
						width: 190upx;
						height: 168upx;
						margin-top: 30upx;
						margin-left: 22upx;
					}
				}
		
				.txt3 {
					margin-top: 30upx;
					width: 614upx;
					box-sizing: border-box;
					background: rgba(240, 240, 240, 1);
					padding: 23upx 20upx 29upx;
					font-size: 28upx;
					color: #999999;
		
					text:first-child {
						font-weight: bold;
					}
				}
			}
		}
		
	}
	.nocomment {
		font-size: 28upx;
		color: rgba(60, 72, 104, 0.5);
		width: 100%;
		padding: 197upx 0upx;
		text-align: center;
	}
</style>
